<template>
  <page-wrap stayStill back :title="showTitle ? info.title : ''" hideTab background-color="#FFFFFF">
    <view class="maskContainer" :style="{ height: fiexdBoxHeight + 'px' }"></view>
    <view :style="{ top: positionFollowPromptTop + 'px', position: 'fixed' }" class="fixed-box">
      <PositionFollowPromptBox :sharePersonId="sharePersonId" :shareChannel="shareChannel"
        v-show="isShowPositionFollowBox" :info="positionFollowPromptInfo"
        @setPositionFollowBoxVisiable="setPositionFollowBoxVisiable" @addToCollectionSuccess="addToCollectionSuccess"
        @loginSuccessBack="loginSuccessBack" @showLoginDialog="showLoginDialog" />
    </view>

    <HighPayPosition v-if="highPayModuleStatus == 0" :info="highPayModuleInfo" />

    <view class="article-detail">
      <view class="article-basic content-margin">
        <view class="article-title">{{ info.title }}</view>
        <view class="article-author">
          <image class="avatar" :src="info.person_detail.person_pic" @click.stop="handleAvatarClick"></image>
          <view @click.stop="handleAvatarClick">
            <view class="author-name">{{
              info.person_detail.person_iname
            }}</view>
            <view class="itime">{{
              info.itime &&
              formatTime(+(info.itime * 1000), "yyyy-MM-dd HH:mm:ss")
            }}</view>
          </view>
        </view>
      </view>
      <!-- <u-parse
        class="article-content"
        v-html="formatRichText(info.content)"
      ></u-parse> -->
      <view class="article-content content-margin" v-html="formatRichText(info.content)"></view>
      <mp-html :content="`<a href='www.baidu.com'>百度</a> `" @linktap="true" :copy-link="true" />
    </view>
    <HighPayPosition v-if="highPayModuleStatus == 2" :info="highPayModuleInfo" />

    <view class="positionRecommendAdv content-margin" v-for="(item, index) in adPosition" :key="index"
      :style="{ 'background-image': 'url(' + item.adPic + ')' }" @click="routerToPosition(item.zpId)"></view>
    <view class="comment-wrap content-margin">
      <view class="comment-wrap-top">
        <view class="top-left comment-element">评论 {{ info.c_cnt || "" }}</view>
        <view class="top-right">
          <text class="like-num">{{ info.like_cnt || 0 }} 赞</text>
          <text>{{ info.shareCount || 0 }} 转发</text>
        </view>
      </view>
      <view class="comment-list">
        <Comment v-for="(item, index) in commentList" :key="item.commentId" :item="item" @like="onLike(index)"
          @comment="handleCommentClick($event, index)"></Comment>
      </view>
      <view v-if="!commentList.length" class="empty">
        <Empty :baseImg="emptyImg" label="快来发表你的评论吧"></Empty>
      </view>
    </view>
    </view>
    <view class="comment-send-wrap">
      <view class="input-box" @click="handleShowMask">
        <text class="icon icon icon-edit"></text>
        <text class="input-text">我来说两句…</text>
      </view>
      <view class="action-item" @click="toComment">
        <text v-if="info.c_cnt > 0" class="badge">{{
          info.c_cnt | cntFilter
        }}</text>
        <text class="icon icon-comment"></text>
      </view>
      <view class="action-item action-collect" @click="handleCollect">
        <text v-if="info.isFavorite == 1" class="icon icon-collect-on"></text>
        <text v-else class="icon icon-collect"></text>
      </view>
      <view class="action-item action-like" @click="handlePraise">
        <text v-if="info.isPraise == 1" class="icon icon-like-on"></text>
        <text v-else class="icon icon-like"></text>
      </view>
      <view class="action-item">
        <button :data-title="info.title" :data-articleid="info.article_id" :data-thumb="info.thumb" data-sharetype="1"
          plain size="mini" class="btn-share" open-type="share">
          <text class="icon icon-share"></text>
        </button>
      </view>
    </view>
    <u-mask :show="showMask" z-index="10076" @click="handleMaskClick">
      <view class="send-box-wrap" :style="'padding-bottom:calc(' + inputBottom + 'px + 24rpx)'" @tap.stop>
        <view class="send-box">
          <view class="send-box-left" :class="{ limit: showAllInput }">
            <!-- <u-input
              v-model="sendText"
              type="textarea"
              maxlength="200"
              height="50"
              cursor-spacing="90"
              :auto-height="false"
              :placeholder="placeholder"
              :show-confirmbar="false"
              :always-embed="true"
              @focus="onFocus"
              @blur="OnBlur"
            >
            </u-input> -->
            <my-textarea :class="['chat-input', lines]" :value.sync="sendText" :cursor="0" :replace="false"
              :clearDisabled="true" :holdKeyboard="true" :placeholder="placeholder"
              @board-change="handleBoardChange"></my-textarea>
            <view class="send-mode">
              <text v-if="sendMode == 'text'" class="icon icon-emoji" @click="handleSendModeClick"></text>
              <text v-if="sendMode == 'emoji'" class="icon icon-keyboard" @click="handleSendModeClick"></text>
            </view>
          </view>
          <view class="send-box-right">
            <view>
              <text v-if="showAllInput" class="icon icon-shrink" @click="showAllInput = false"></text>
              <text v-else class="icon icon-open" @click="showAllInput = true"></text>
            </view>
            <view class="btn-send" :class="{ on: sendText }" @click="addArticleComment">发布</view>
          </view>
        </view>
        <Emoji :visible="faceVisible" :faceList="faceList" @emoji="strToEmoji" />
      </view>
    </u-mask>

    <LoginDialog ref="loginDialog" @loginSuccessBack="loginSuccessBack" @closeDialog="closeLoginDialog"></LoginDialog>
    <shareActivitySides ref="shareActivitySides" :positionId="positionId" @click="handleShareActivitySidesClick"
      @checkLogin="checkLogin" />
  </page-wrap>
</template>

<script>
import { formatTime, formatRichText } from "@/utils/handle";
import { faceTypeList } from "@/utils/data";
import {
  getArtContent,
  addArticlePraise,
  getArticleCommentList,
  addArticleFavorite,
  addArticleComment,
  addCommentPraise,
  personCollectInfo,
  addMessageSubscribe,
  getAdByContentId,
  getAdvertConfigList,
  updateNotifyReadStatus,
} from "@/api/modules/career";
import Empty from "@/components/Empty";
import Comment from "../components/CommentArt";
import Emoji from "@/components/Emoji";
import MyTextarea from "../components/MyTextarea.vue";

import { articleDetailBuryingPoint } from "@/utils/buryingPoint";
import { showDelayToastTip } from "@/utils/handle";
import ShareMixin from "@/mixins/share";
import ReportShareMixin from "@/mixins/reportShare";
import HighPayPosition from "./components/HighPayPosition.vue";
import PositionFollowPromptBox from "../components/PositionFollowPromptBox.vue";
import LoginDialog from "@/components/LoginDialog";
import shareActivitySides from "@/pagesSub/career/careerInfo/components/shareActivitySides";
export default {
  mixins: [ShareMixin, ReportShareMixin],
  components: {
    Empty,
    Comment,
    Emoji,
    MyTextarea,
    PositionFollowPromptBox,
    HighPayPosition,

    LoginDialog,
    shareActivitySides,
  },
  data() {
    return {
      adPosition: [
        {
          adPic: "",
          adLink: "",
          adTitle: "",
          adContentId: "",
          apId: "",
        },
      ],
      sharePersonId: "",
      shareChannel: "",
      lines: 0,
      inputBottom: 0,
      personId: uni.getStorageSync("person-id").slice(2) || "",
      openId: uni.getStorageSync("openid") || "",
      articleId: "",
      info: {
        person_detail: {},
      },
      formatTime,
      formatRichText,
      emptyImg: this.$imgBaseSelf + "common/empty.png",
      commentList: [],
      faceList: [],
      pageNo: 0,
      sendText: "",
      showSend: true,
      sendMode: "text",
      showAllInput: false,
      faceVisible: false,
      sending: false,
      selectedComment: {},
      showMask: false,
      faceList: [],
      showTitle: false,
      isShareArticle: true,
      positionFollowPromptTop: 0,
      isShowPositionFollowBox: false,
      // 高薪职位模块的姿态 -1-都不显示 0-上面展开状态 1-上面折叠状态 2-下面
      highPayModuleStatus: -1,
      highPayModuleInfo: {},

      lastCommentScrollTop: 0,
      // 屏幕高度
      wH: 0,
      // 标识内容相关 2-从职业大全那边点击进来的职讯，3-从职业大全那边点击进来的答案
      relatedType: "0",
      promote_id: undefined,
      promote_way: undefined,
      positionFollowPromptInfo: {},
      positionId: "",
      // 维度id
      layerId: undefined,
      fiexdBoxHeight: 0,
      defaultCoverImg:
        "https://img3.job1001.com/ypMp/elan/images/career/article_default_share_cover.jpg",
    };
  },
  computed: {
    placeholder() {
      if (!this.showMask) return "";
      if (this.selectedComment._person_detail) {
        return "回复：" + this.selectedComment._person_detail.person_iname;
      } else {
        return "评论连接你我他，文明用语靠大家";
      }
    },
  },
  filters: {
    cntFilter(val) {
      if (val > 10000) return Math.floor(val / 10000) + "w+";
      return val;
    },
  },
  onLoad(opt) {
    console.log("op------------------------------------", opt);

    if (opt.sharePersonId) {
      this.sharePersonId = opt.sharePersonId;
      this.shareChannel = opt.shareChannel;
    }
    if (opt.id instanceof Array) {
      this.articleId = opt.id[0];
    } else {
      this.articleId = opt.id;
    }
    if (opt.jumpParams) {
      this.articleId = opt.jumpParams.substring(0, opt.jumpParams.indexOf("_"));
    }
    opt && (this.relatedType = opt.relatedType || "0");
    opt && (this.positionId = opt.positionId || "");
    opt && (this.layerId = opt.layerId || "");
    opt && (this.promote_id = opt.promote_id);
    opt && (this.promote_way = opt.promote_way);

    this.sharePath =
      "/pagesSub/career/careerInfo/articleDetail?" +
      "id=" +
      this.articleId +
      "&layerId=" +
      this.layerId +
      "&relatedType=" +
      this.relatedType +
      "&positionId=" +
      this.positionId;
    this.getRecommendPositionId(this.articleId);
    this.updateNotifyStatus(); //记录从短信链接打开小程序订阅内容
  },
  onReachBottom() {
    this.getComments(true);
  },
  onPageScroll(res) {
    var scrollTop = res.scrollTop;
    this.showTitle = scrollTop > 40;
    // if(scrollTop > 40){
    //   if(this.highPayModuleStatus == 0){
    //     this.highPayModuleStatus = 1;
    //     setTimeout(() => {
    //       this.calculateFixedBox();
    //     }, 200);
    //   }
    // }else{
    //   if(this.highPayModuleStatus == 1){
    //     this.highPayModuleStatus = 0;
    //     setTimeout(() => {
    //       this.calculateFixedBox();
    //     }, 200);
    //   }
    // }

    this.getCommentElement();
  },
  created() {
    this.getFaceList();
  },
  mounted() {
    this.wH = uni.getSystemInfoSync().windowHeight;
    this.initPageData();
    //this.getCommentElement();
  },
  methods: {
    // 页面初始化
    initPageData() {
      this.getData();
      this.reqPersonCollectInfo();
      this.sendBuryingPoint();
    },

    //获取评论元素相关参数
    getCommentElement() {
      if (this.personId) {
        return;
      }
      const query = uni.createSelectorQuery().in(this);
      query
        .select(".comment-element")
        .boundingClientRect((data) => {
          //console.log('data','height:'+ data.height+",top:"+data.top+ ",wH:"+ this.wH);

          if (data.top + 80 < this.wH) {
            // console.log("评论文本显示"+this.lastCommentScrollTop+","+data.top);
            if (this.lastCommentScrollTop <= data.top) {
            } else {
              this.$refs.loginDialog.setVisibility(true);
            }
          }
          this.lastCommentScrollTop = data.top;
        })
        .exec();
    },

    // 发送数据埋点
    sendBuryingPoint() {
      articleDetailBuryingPoint(this.promote_id, this.promote_way);
    },

    // 获取广告配置列表数据
    reqGetAdvertConfigList(positionName) {
      var that = this;
      // if(this.layerId != '119' && this.layerId != '49'){
      //   // 维度ID不是 119答案 或者 49职讯就返回
      //   return;
      // }
      const params = {
        positionId: this.positionId,
        layerId: this.layerId,
        dataType: 50, //关联类型 10：报告id  20：案例id  30 ：职讯id  40：短视频id 50：职位
      };
      getAdvertConfigList(params).then((res) => {
        if (res && res.code == 200) {
          var list = res.data;
          var tempHighPayModuleInfo = {
            list: undefined,
            positionId: that.positionId,
            layerId: that.layerId,
            positionName: positionName,
          };
          if (Array.isArray(list) && list.length > 0) {
            // 有广告配置列表
            //modPosition 内容位置  10：顶部 20：底部
            var modPosition = list[0].modPosition + "";
            if (modPosition == "10") {
              that.highPayModuleStatus = 0;
            } else {
              that.highPayModuleStatus = 2;
            }
            tempHighPayModuleInfo.list = list;
          } else {
            // 没有广告配置列表
            tempHighPayModuleInfo.list = [];
            that.highPayModuleStatus = -1;
          }
          that.highPayModuleInfo = tempHighPayModuleInfo;
          that.calculateFixedBox();
          setTimeout(() => {
            that.calculateTop();
          }, 200);
        }
      });
    },

    // 点击展开高薪职位模块
    handleExpandHighPay() {
      this.highPayModuleStatus = 0;
    },
    handleShareActivitySidesClick() {
      if (this.checkLogin()) {
        this.ShareActivitySidesShow = true;
      }
    },
    routerToPosition(id) {
      uni.navigateTo({
        url:
          "/pagesSub/public/jobDetail/index?jobId=" +
          id +
          "&positionId=" +
          this.positionId,
      });
    },
    getRecommendPositionId(id) {
      getAdByContentId({ contentId: id }).then((res) => {
        if (res.code == 200) {
          // console.log(res.data, "9999999999999");
          this.adPosition = res.data;
        }
      });
    },
    onClickMorePositionImg() {
      this.subscribeMessage();
    },
    // 订阅 通知
    subscribeMessage() {
      const that = this;
      var ids = "meN3arXkcBxBpGRG81narVRMmqU-jA5i-IXRcs0fPb4";
      uni.getSetting({
        withSubscriptions: true,
        success: function (res) {
          if (res.subscriptionsSetting.mainSwitch) {
            // 用户打开了订阅消息总开关
            if (res.subscriptionsSetting.itemSettings != null) {
              // 用户同意总是保持是否推送消息的选择, 这里表示以后不会再拉起推送消息的授权
              let moIdState = res.subscriptionsSetting.itemSettings[ids]; // 用户同意的消息模板id
              if (moIdState === "accept") {
                console.log("已接受订阅消息");
                showDelayToastTip("之前已设置接受订阅消息", 50);
              } else if (moIdState === "reject") {
                console.log("之前已设置拒绝订阅消息");
                showDelayToastTip("已拒绝订阅消息", 50);
              } else if (moIdState === "ban") {
                console.log("已被后台封禁");
                showDelayToastTip("已被后台封禁", 50);
              }
            } else {
              // 当用户没有点击 ’总是保持以上选择，不再询问‘  按钮。那每次执到这都会拉起授权弹窗
              uni.requestSubscribeMessage({
                tmplIds: [ids],
                complete: (res) => {
                  console.log("requestSubscribeMessage complete", res);
                  //console.log('requestSubscribeMessage ids',res[''+ ids +'']);
                  var value = res["" + ids + ""];
                  if (value == "accept") {
                    console.log("requestSubscribeMessage value", "accept");
                    // 接受了
                  } else if (value == "reject") {
                    console.log("requestSubscribeMessage value", "reject");
                    // 拒绝了
                  }
                },
              });
            }
          } else {
            showDelayToastTip("用户没有打开订阅消息总开关", 50);
          }
        },
      });
    },
    addToCollectionSuccess(val) {
      this.reqAddMessageSubscribe();
    },
    // 获取用户关注的信息
    reqPersonCollectInfo() {
      // if (this.relatedType != "2") {
      //   // 不是职业大全相关的跳进来的
      //   console.log('不是职业大全相关的跳进来的');
      //   this.setPositionFollowBoxVisiable(false);
      //   return;
      // }

      const params = {
        positionId: this.positionId,
        personId: this.personId,
      };
      personCollectInfo(params).then((res) => {
        if (res.code == 200 && res.data) {
          var positionName = res.data.positionName;
          if (res.data.isLogin && res.data.isCollect) {
            // 已登录已关注的不显示悬浮框
            this.setPositionFollowBoxVisiable(false);
          } else if (this.relatedType != "2") {
            // 不是职业大全相关的跳进来的
            this.setPositionFollowBoxVisiable(false);
          } else {
            // 用户登录但是没有关注，或者用户没有登录
            this.setPositionFollowBoxVisiable(true);
            this.positionFollowPromptInfo = {
              relatedType: this.relatedType,
              type: 1,
              positionId: this.positionId,

              isLogin: res.data.isLogin,
              isCollect: res.data.isCollect,
              positionPic: res.data.positionPic,
              positionName: res.data.positionName,
            };
          }
          // 获取广告配置列表
          this.reqGetAdvertConfigList(positionName);
        } else {
          if (this.relatedType != "2") {
            // 不是职业大全相关的跳进来的
            this.setPositionFollowBoxVisiable(false);
          }
        }
      });
    },
    // 记录消息订阅
    reqAddMessageSubscribe() {
      const params = {
        dataId: this.positionId,
        personId: this.personId,
        openId: this.openId,
        //pushType 推送类型 10：报告  20：案例 30 ：职讯  40 ：短视频
        pushType: 30,
      };
      addMessageSubscribe(params).then((res) => {
        // console.log("reqAddMessageSubscribe", res);
      });
    },
    setPositionFollowBoxVisiable(val) {
      this.isShowPositionFollowBox = val;
      if (val && this.positionFollowPromptTop == 0) {
        setTimeout(() => {
          this.calculateTop();
        }, 200);
      }

      setTimeout(() => {
        this.calculateFixedBox();
      }, 400);
    },

    // 计算顶部粘性模块
    calculateFixedBox() {
      uni
        .createSelectorQuery()
        .in(this)
        .select(".fixed-box")
        .boundingClientRect((rect) => {
          // console.log("计算顶部粘性模块", rect);
          rect && (this.fiexdBoxHeight = rect.height);
        })
        .exec();
    },

    calculateTop() {
      var that = this;
      uni
        .createSelectorQuery()
        .in(this)
        .select(".maskContainer")
        .boundingClientRect((rect) => {
          rect && (this.positionFollowPromptTop = rect.top);
          //console.log("positionFollowPromptTop", this.positionFollowPromptTop);
        })
        .exec();
    },

    handleBoardChange(height) {
      // console.log("height", height);
      this.inputBottom = height;
    },
    handleAvatarClick() {
      uni.navigateTo({
        url:
          "/pagesSub/career/consultant/index?id=" +
          this.info.person_detail.person_id,
      });
    },
    getData() {
      const params = {
        art_id: this.articleId,
        conditionArr: JSON.stringify({
          get_favorite_flag: true,
          get_person_flag: true,
          login_person_id: this.personId,
          person_id: this.personId,
          change_v_cnt: 1,
        }),
      };
      getArtContent(params).then((res) => {
        if (res) {
          this.info = res;

          // console.log("文章详情详情", this.info.content);
          this.shareContent.contentTitle = this.info.title;
          this.shareContent.contentType = "30";
          this.shareContent.contentId = this.articleId;
          this.getComments();

          this.setShareInfo();
        }
      });
    },
    // 评论列表
    getComments(isMore) {
      if (this.loading || this.finished) return;
      this.loading = true;

      const params = {
        condition: JSON.stringify({
          article_id: this.articleId,
          personid: this.personId,
          get_person_flag: "1",
          re_child_comment: "1",
          get_parent_comment: "1",
          get_parent_comment_person: "1",
          mode: "all",
          page: this.pageNo,
          page_size: 10,
        }),
      };
      getArticleCommentList(params)
        .then((res) => {
          if (res.data) {
            let data = res.data || [];
            data = data.map((item) => {
              item.content = this.changeToEmoji(item.content);
              if (item._parent_comment) {
                item._parent_comment.content =
                  "回复" +
                  item._parent_person_detail.person_iname +
                  this.changeToEmoji(item._parent_comment.content);
              }
              return item;
            });
            if (isMore) {
              this.commentList.push(...res.data);
            } else {
              this.commentList = res.data;
            }
            if (this.commentList.length >= res.pageparam.sums) {
              this.finished = true;
            }
            this.info.c_cnt = res.pageparam.sums;
            this.pageNo++;
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    refreshComments() {
      this.finished = false;
      this.pageNo = 0;
      this.getComments();
    },
    onLike(index) {
      if (!this.checkLogin()) return;
      let isPraise = this.commentList[index].is_praise == 1 ? "cancel" : "add";

      const params = {
        person_id: this.personId,
        comment_id: this.commentList[index].id,
        type: isPraise,
      };

      addCommentPraise(params).then((res) => {
        if (res.code == 200) {
          this.commentList[index].is_praise = isPraise == "add" ? "1" : "0";
          let num = isPraise == "add" ? 1 : -1;
          this.commentList[index].agree = +this.commentList[index].agree + num;
        }
      });
    },
    // 表情数组
    getFaceList() {
      let face = faceTypeList;
      face.forEach((item, index) => {
        this.faceList.push({
          title: item,
          src: `//j.job1001.com/yl1001plugin/YL1001Editor/kindeditor-4.1.10/plugins/emoticons/images/${index}.gif`,
        });
      });
    },
    changeToEmoji(cont) {
      var that = this;
      var reg = /\[.+?\]/g;
      let str;
      str = cont.replace(reg, function (a) {
        let index = that.faceList.findIndex((ele) => ele.title == a);
        if (index > -1) {
          return (
            '<img class="emoji" style="vertical-align: -6px;" src="' +
            that.faceList[index].src +
            '"/>'
          );
        } else {
          return a;
        }
      });
      return str;
    },

    // 点赞
    handlePraise() {
      if (!this.checkLogin()) return;
      let type = this.info.isPraise == 1 ? "cancel" : "add";
      const params = {
        person_id: this.personId,
        article_id: this.articleId,
        type: type,
      };
      addArticlePraise(params).then((res) => {
        if (res.code == 200) {
          this.info.isPraise = type == "add" ? "1" : "0";
        }
        uni.showToast({
          title: res.status_desc,
          icon: "none",
        });
      });
    },

    // 收藏
    handleCollect() {
      if (!this.checkLogin()) return;
      let type = this.info.isFavorite == 1 ? "cancel" : "add";
      const params = {
        person_id: this.personId,
        article_id: this.articleId,
        type: type,
      };
      addArticleFavorite(params).then((res) => {
        if (res.code == 200) {
          this.info.isFavorite = type == "add" ? "1" : "0";
        }
        uni.showToast({
          title: res.status_desc,
          icon: "none",
        });
      });
    },

    handleSendModeClick() {
      if (this.sendMode == "text") {
        this.faceVisible = true;
        this.sendMode = "emoji";
      } else if (this.sendMode == "emoji") {
        this.faceVisible = false;
        this.sendMode = "text";
      }
    },

    // 表情包插入输入框
    strToEmoji(title) {
      this.sendText += title;
    },

    // 点击评论
    handleCommentClick(data, index) {
      if (data) {
        this.selectedComment = data.reply;
      } else {
        this.selectedComment = {};
      }
      this.showMask = true;
    },
    addArticleComment() {
      if (!this.checkLogin()) return;

      if (!this.sendText || this.sending) return;
      this.sending = true;
      const params = {
        insertArr: JSON.stringify({
          article_id: this.articleId,
          content: this.sendText,
          user_id: this.personId,
          parent_id: this.selectedComment.id || "",
        }),
      };
      this.sendText = "";
      addArticleComment(params)
        .then((res) => {
          if (res.code == 200) {
            uni.showToast({
              title: res.status_desc,
              icon: "none",
            });
            this.refreshComments();
            this.showMask = false;
            this.selectedComment = {};
          } else {
            uni.showToast({
              title: res.status_desc || "未知错误",
              icon: "none",
            });
          }
        })
        .finally(() => {
          this.sending = false;
        });
    },
    handleMaskClick() {
      this.showMask = false;
      this.selectedComment = {};
    },
    checkLogin() {
      if (this.personId) return true;
      this.$refs.loginDialog.setVisibility(true);
      return false;
    },
    loginSuccessBack() {
      // console.log("loginSuccessBack");
      this.personId = uni.getStorageSync("person-id").slice(2) || "";
      this.initPageData();
      this.getComments();
      this.$refs.shareActivitySides.reloadPersonId();
    },
    closeLoginDialog(val) {
      console.log("closeLoginDialog");
    },
    showLoginDialog() {
      this.checkLogin();
    },
    handleShowMask() {
      if (!this.checkLogin()) return;
      this.showMask = true;
      this.toComment();
    },
    toComment() {
      uni
        .createSelectorQuery()
        .select(".article-detail")
        .boundingClientRect((data) => {
          uni
            .createSelectorQuery()
            .select(".comment-wrap")
            .boundingClientRect((res) => {
              uni.pageScrollTo({
                scrollTop: res.top - data.top - 10,
              });
            })
            .exec();
        })
        .exec();
    },
    setShareInfo() {
      this.shareTitle = this.info.title;
      //this.imageUrl = this.info.thumb;
      this.imageUrl = this.defaultCoverImg;
      this.shareQuery =
        "id=" +
        this.articleId +
        "&relatedType=" +
        this.relatedType +
        "&positionId=" +
        this.positionId;
    },
    // 页面分享统计, 在shareMixin里调用
    shareArticle() {
      const info = {
        shareType: "1", // share_type 分享类型 1：文章 2：视频
        articleId: this.articleId,
      };
      this.shareArticleInfo(info); // from shareMixin
    },
    updateNotifyStatus() {
      let params = {
        dataId: this.articleId,
      };
      // console.log("xxxxxxxx小程序段链接updateNotifyStatus进入订阅通知xxxxxxxxxxx",params);
      updateNotifyReadStatus(params).then((res) => {
        if (res && res.code == 200) {
          // console.log(
          //   "------------点击进入职讯记录成功------------------------"
          // );
          // uni.showToast({
          //   icon: "none",
          //   title: "点击进入职讯",
          // });
        } else {
          // uni.showToast({
          //   icon: "none",
          //   title: res.status_desc,
          //   duration: 1000,
          // });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.enterStyle {
  animation-name: enterAnimation;
  animation-duration: 2s;
  // animation-iteration-count: 1;
}

@keyframes enterAnimation {
  0% {
    opacity: 0;
    transform: translateX(206rpx);
  }
  100% {
    opacity: 1;
    transform: translateX(0rpx);
  }
}

.morePositionImgStyle {
  background-image: url($img-base + "career/icon_more_position_info_block.png");
  position: fixed;
  bottom: 30vh;
  background-size: 100% 100%;
  right: 0;
  width: 206rpx;
  height: 290rpx;
  animation-name: enterAnimation;
  animation-duration: 1s;
}

.maskContainer {
  width: 100vw;
  //height: 112rpx;
}
.fixed-box {
  display: flex;
  flex-direction: column;
}

.content-margin {
  margin-left: 32rpx;
  margin-right: 32rpx;
}

.article-detail {
  //padding: 32rpx;
  padding-top: 32rpx;

  padding-bottom: 0;
  background-color: #fff;

  .article-title {
    margin-bottom: 40rpx;
    font-size: 36rpx;
    font-weight: bold;
    color: #010101;
  }

  .article-author {
    display: flex;
    margin-bottom: 60rpx;

    .avatar {
      width: 80rpx;
      height: 80rpx;
      margin-right: 20rpx;
      border-radius: 50%;
    }

    .author-name {
      margin-bottom: 6rpx;
      font-weight: bold;
    }

    .itime {
      font-size: 24rpx;
      color: $uni-text-color-888;
    }
  }
  ::v-deep .article-content {
    max-width: 100vw !important;
    overflow: hidden !important;
    img {
      width: 100%;
    }
  }
}
.comment-wrap {
  padding-bottom: 124rpx;

  .empty {
    padding-top: 100rpx;
    padding-bottom: 100rpx;
  }

  &-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 74rpx;

    .top-left {
      font-size: 36rpx;
      font-weight: bold;
    }

    .top-right {
      font-size: 26rpx;
      color: $uni-text-color-888;

      .like-num {
        position: relative;
        margin-right: 48rpx;

        &::after {
          position: absolute;
          content: "";
          right: -24rpx;
          top: 8rpx;
          width: 2rpx;
          height: 22rpx;
          background-color: #d6d6d6;
        }
      }
    }
  }
}
.comment-send-wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  box-sizing: content-box;
  padding: 24rpx 0 24rpx 32rpx;
  padding-bottom: calc(constant(safe-area-inset-bottom) + 24rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) + 24rpx);
  background-color: #fff;
  box-shadow: 10rpx -8rpx 20rpx 0px rgba(0, 0, 0, 0.05);

  .action-item {
    position: relative;

    .badge {
      position: absolute;
      top: -8rpx;
      left: 24rpx;
      padding: 2rpx 8rpx;
      font-size: 18rpx;
      border-radius: 12rpx;
      color: #fff;
      background-color: #f04646;
    }
  }
  .input-box {
    margin-right: 36rpx;
    padding: 18rpx 34rpx;
    background-color: #f7f8fa;
    color: #888888;
    border-radius: 40rpx;
    font-size: 28rpx;

    .icon-edit {
      margin-right: 20rpx;
      width: 24rpx;
      height: 28rpx;
      background-image: url($img-base + "career/edit.png");
    }
  }
  .icon-comment {
    margin-right: 52rpx;
    width: 48rpx;
    height: 48rpx;
    background-image: url($img-base + "career/comment_1.png");
  }

  .action-collect {
    margin-right: 56rpx;
  }

  .icon-collect {
    width: 48rpx;
    height: 48rpx;
    background-image: url($img-base + "career/collect.png");
  }

  .icon-collect-on {
    width: 48rpx;
    height: 48rpx;
    background-image: url($img-base + "career/collect_on.png");
  }

  .action-like {
    margin-right: 56rpx;
  }

  .icon-like {
    width: 48rpx;
    height: 44rpx;
    background-image: url($img-base + "career/thumb.png");
  }

  .icon-like-on {
    width: 48rpx;
    height: 44rpx;
    background-image: url($img-base + "career/thumb_up.png");
  }

  .btn-share {
    padding: 0;
    border: none;
    background-color: transparent;
  }

  .icon-share {
    width: 72rpx;
    height: 72rpx;
    background-image: url($img-base + "career/zhuanfa_red.png");
  }
}

.send-box-wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24rpx;
  padding-bottom: calc(40rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
  background-color: #fff;
  box-shadow: 10rpx -8rpx 20rpx 0px rgba(0, 0, 0, 0.05);
  .send-box {
    display: flex;
    &-left {
      flex: 1;
      padding: 8rpx 24rpx 18rpx 24rpx;
      background-color: #f7f8fa;
      border-radius: 12rpx;
      width: 590rpx;

      .send-mode {
        text-align: right;
      }
    }
    &-right {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      padding: 0 24rpx;

      .icon {
        width: 32rpx;
        height: 32rpx;
      }
      .icon-open {
        background-image: url($img-base + "career/open.png");
      }
      .icon-shrink {
        background-image: url($img-base + "career/shrink.png");
      }

      .btn-send {
        font-size: 32rpx;
        color: #bfbfbf;
        &.on {
          color: #f04646;
        }
      }
    }
    .icon-emoji {
      width: 44rpx;
      height: 44rpx;
      background-image: url($img-base + "message/emoji.png");
    }
    .icon-keyboard {
      width: 44rpx;
      height: 44rpx;
      background-image: url($img-base + "message/keyboard.png");
    }
  }
}
.positionRecommendAdv {
  background-repeat: no-repeat;
  background-size: cover;
  height: 160rpx;
  background-position: center;
  margin-top: 10rpx;
}
::v-deep .send-box {
  .u-input__textarea {
    max-height: 60vh;
    height: 100rpx;
  }

  .limit {
    .chat-input {
      height: 50vh;
    }
    .form-textarea .textarea-input textarea,
    .form-textarea .textarea-input .textarea {
      height: 50vh;
    }
  }
}
::v-deep .chat-input {
  flex-grow: 1;
  flex-shrink: 1;
  display: flex;
  align-items: center;
  position: relative;
  margin-right: 24rpx;
  height: 88rpx;
  border-radius: 44rpx;
  background: $uni-bg-color-grey;
  overflow: auto;
  &.lines1 {
    height: 140rpx;
    textarea {
      height: 140rpx;
    }
  }
  &.lines2 {
    height: 180rpx;
    textarea {
      height: 180rpx;
    }
  }
  textarea {
    padding: 8rpx 24rpx 18rpx 24rpx;
    height: 88rpx;
    line-height: $uni-font-size-sec;
    font-size: $uni-font-size-base;
    &.clear {
      padding: 0 !important;
    }
  }
  .clear-icon {
    display: flex;
    align-items: center;
    padding: 0 24rpx;
    height: 100%;
  }
}

::v-deep .form-textarea .textarea-input .placeholder {
  padding: 0 !important;
}
::v-deep .form-textarea .textarea-input textarea,
.form-textarea .textarea-input .textarea {
  padding: 0;
}
.chat-input {
  border-radius: 0;
}
::v-deep .form-textarea .textarea-input .textarea.clear,
.form-textarea .textarea-input textarea.clear {
  padding: 0;
}
</style>
